import {IProgram} from '@/models/album';
import React, {useState} from 'react';
import {StyleSheet, Platform} from 'react-native';
import {SceneRendererProps, TabBar, TabView} from 'react-native-tab-view';
// import { View, Text, StyleSheet } from 'react-native';
import Introduction from './Introduction';
import List from './List';

interface IRoute {
  key: string;
  title: string;
}
interface IState {
  routes: IRoute[];
  index: number;
}
interface IProps {
  onItemPress: (data: IProgram, index: number) => void;
}
const Tab: React.FC<IProps> = props => {
  const {onItemPress} = props;
  const [tabIndex, setTabIndex] = useState(1);
  const [tabRouters] = useState([
    //路由对象
    {key: 'introduction', title: '简介'}, //title为显示  如果不传入则显示key
    {key: 'albums', title: '节目'},
  ]);
  const onIndexChange = (index: number) => {
    setTabIndex(index);
  };
  const renderScene = ({route}: {route: IRoute}) => {
    switch (route.key) {
      case 'introduction':
        return <Introduction />;
      case 'albums':
        return <List onItemPress={onItemPress} />;
      default:
        break;
    }
  };
  const renderTabBar = (
    renderProps: SceneRendererProps & {navigationState: IState},
  ) => {
    return (
      <TabBar
        {...renderProps}
        scrollEnabled //开启滚动
        labelStyle={[styles.label]} //标签字体样式
        tabStyle={styles.tabStyle}
        style={styles.tabBar}
        indicatorStyle={styles.indicator}
        activeColor="#333" //选中的字体颜色   因为labelStyle设置无法生效   曲线救国
        inactiveColor="#333" //未选中的字体颜色
      />
    );
  };
  return (
    // <View>
    //   <Text>Tab</Text>
    // </View>
    <TabView
      navigationState={{
        routes: tabRouters,
        index: tabIndex, //路由下标
      }}
      onIndexChange={onIndexChange} //路由下标改变时回调函数
      renderScene={renderScene} //当前路由需要渲染什么组件
      renderTabBar={renderTabBar}
    />
  );
};

const styles = StyleSheet.create({
  tabStyle: {
    width: 80,
  },
  tabBar: {
    backgroundColor: '#FFF',
    ...Platform.select({
      android: {
        elevation: 0,
        borderBottomColor: '#e3e3e3',
        borderBottomWidth: StyleSheet.hairlineWidth,
      },
    }),
  },
  label: {
    color: '#333333',
  },
  indicator: {
    backgroundColor: '#eb6d48',
    borderLeftWidth: 20,
    borderRightWidth: 20,
    borderColor: '#FFF',
  },
});

export default Tab;
